<template>
  <dtDialog
    width="55%"
    :title="'区划测试'"
    :visible.sync="testVisible"
    :footer-slot="true"
    @closeDialog="resetCompartment"
  >
    <div slot="content">
      <div class="three-linkage">
        <div class="title">三级区划联动（省市县）</div>
        <dt-separateCascader v-if="testVisible" :level="3" :interface="configApi.queryCounty"
                             :test-visible="testVisible" />
        <div class="title second">五级区划联动（省市县乡村）</div>
        <dt-separateCascader v-if="testVisible" :interface="configApi.queryCounty" :level="5"
                             :test-visible="testVisible" />
      </div>
    </div>
  </dtDialog>
</template>
<script>
import configApi from '@/framework/api/zoningManage'

export default {
  data() {
    return {
      testVisible: false,
      configApi
    }
  },
  mounted() {
  },
  methods: {
    initData() {
      this.testVisible = true
      this.getList()
    },
    resetCompartment() {
      this.testVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.three-linkage{
  .title{
    color:#131314;
    line-height: 24px;
    margin-bottom: 8px;
  }
  .second{
      margin-top: 24px;
    }
}
</style>
